<template>
  <div class="community">
    <div class="community-wrapper">
      <!--社区顶部搜索-->
      <div class="wrapper-top" :style="article_bg_img?`background-image:url(${article_bg_img})`: ''">
        <div class="wrapper-top-item">
          <div class="wrapper-top-item-avatar" v-if="user_img != ''">
            <img :src="user_img" alt="">
          </div>
          <div class="wrapper-top-item-avatar" v-else>
            <img v-if="wx_qrcode" :src="wx_qrcode" alt="">
            <img v-else src="https://img.wifenxiao.com/h5-wfx/images/community/default_avatar.png" alt="">
          </div>
          <div class="wrapper-top-item-input">
            <div class="icon-search" @click="searchList">
              <img class="icon" src="https://img.wifenxiao.com/h5-wfx/images/diy/tpl46/63select.png" alt="">
            </div>
            <input placeholder-class="place-holder" @confirm="searchList" v-model="keyword" type="text" placeholder="搜索试一试">
          </div>
          <a @click="JumpUrl(index_link)" v-if="user_img == ''">
            <div class="wrapper-top-item-icon">
              <img class="icon_store" src="https://img.wifenxiao.com/h5-wfx/images/community/store.png" alt="">
              <div class="text">店铺</div>
            </div>
          </a>
        </div>
        <div class="wrapper-top-tab" v-if="community_user_id == 0 && community_user_reply_id == 0">
          <div
            v-for="(item, index) in navList" :key="index"
            @click="handleClickTab(index)"
            :class="item.active ? 'active': ''"
            class="wrapper-top-tab-item">
            <div class="txt">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <!--社区主体内容-->
      <div class="wrapper-content">
        <div class="tag_class" v-if="activeNum == 0">
          <ul>
            <li v-for="(navItem, navInd) in tagClassList" :key="navItem.label_id" :class="curIndex==navInd ? 'sel': ''" @click="clickTagClass(navItem.label_id, navInd)">{{navItem.title}}</li>
          </ul>
        </div>
        <div class="article-wrapper" v-if="activeNum == 0">
          <article-list ref="articleLists" @articleBgImg="articleBgImg" @changeCommunityUserId="changeCommunityUserId" :community_user_reply_id="community_user_reply_id" :community_user_id="community_user_id"></article-list>
        </div>
        <div class="video-wrapper" v-if="activeNum == 1">
          <video-list ref="videoLists" @articleBgImg="articleBgImg"></video-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
	 * @Author: yqe@360shop.cn
	 * @Date: 2019-09-26 16:48:09
	 * @Last Modified by: yqe@360shop.cn
	 * @Last Modified time: 2019-09-26 16:48:09
	 */
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import { openPage } from '@/utils/utils'
  import Store from '@/utils/store'
  import videoList from './components/videoList/index'
  import articleList from './components/articleList/index'
  import { getUserInfo } from '@/api/login'
  import { getCommunityLabel, getCommunityUserInfo } from '@/api/community/article'
  import { mpShare } from '@/utils/utils'
  import small from '@/smallapp/small'
  export default Vue.extend({
    name: 'dashboard',
    computed: {
      ...mapGetters(['wxConfig'])
    },
    components: {
      videoList,
      articleList
    },
    data() {
      return {
        keyword: '',
        activeNum: 1,
        wx_qrcode: '',
        index_link: '',
        navList: [
          { title: '文章', active: false },
          { title: '视频', active: true }
        ],
        // 标签类
        tagClassList: [],
        curIndex: 0,
        tagClassId: '',
        article_bg_img: '',
        community_user_id: 0,
        user_img: '',
        community_user_reply_id: 0
      }
    },
    methods: {
      changeCommunityUserId(community_user_id) {
        this.community_user_id = community_user_id
        // console.log(this.community_user_id, '======>')
        if (this.community_user_id > 0) {
          this.getCommunityUserInfo({ community_user_id: community_user_id })
        }
      },
      getCommunityUserInfo(param) {
        getCommunityUserInfo(param).then(res => {
          if (res.status) {
            this.user_img = res.data.head_img
          }
        })
      },
      articleBgImg(Image) {
        // console.log('Image', Image)
        this.article_bg_img = Image
      },
      JumpUrl(url) {
        openPage(url)
      },
      /**
       * 顶部的搜索
       */
      searchList() {
        if (this.activeNum === 0) {
          this.$refs.articleLists.postData.title = this.keyword
          this.$refs.articleLists.postData.page = 1
          this.$refs.articleLists.init('search')
        } else {
          this.$refs.videoLists.postData.title = this.keyword
          this.$refs.videoLists.postData.page = 1
          this.$refs.videoLists.getVideoListPost('search')
        }
      },
      /**
       * 顶部的Tab切换
       */
      handleClickTab(index) {
        this.navList.forEach((item, num) => {
          this.$set(this.navList[num], 'active', false)
        })
        this.$set(this.navList[index], 'active', true)
        this.activeNum = index
        Store.save('pageType', index)
        if (index == 0) {
          this.getTagClassList()
        }
      },
      /**
       * 回退页面之后保持上一次的列表
       */
      whichPage() {
        const pageType = Store.fetch('pageType')
        this.navList.forEach((item, num) => {
          this.$set(this.navList[num], 'active', false)
        })
        if (pageType === 0) {
          this.$set(this.navList[0], 'active', true)
          this.activeNum = 0
        } else if (pageType === 1) {
          this.$set(this.navList[1], 'active', true)
          this.activeNum = 1
        } else {
          if (this.$route.name === 'article') {
            this.$set(this.navList[0], 'active', true)
            this.activeNum = 0
          } else if (this.$route.name === 'video') {
            this.$set(this.navList[1], 'active', true)
            this.activeNum = 1
          }
        }
      },
      // 会员数据
      getUserInfoFn() {
        getUserInfo().then(res => {
          if (res.status == 1) {
            this.wx_qrcode = res.data.avatar
            // const sid = small.globalData.shopId
            // const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
            // const option = {
            //   title: '邀请您来观看~',
            //   shareParam: `sid=${sid}&pid=${pid}`,
            // }
            // mpShare (true, true, '/goodsOrder/pages/video/index', option, '/video')
          }
        })
      },
      // 获取标签类
      getTagClassList() {
        getCommunityLabel().then(res => {
          if (res.status == 1) {
            this.tagClassList = res.data
          }
        })
      },
      clickTagClass(labelId, navInd) {
        this.curIndex = navInd
        this.tagClassId = labelId
        // console.log(this.$refs.articleLists)
        // console.log(labelId)
        this.$refs.articleLists.postData.label_id = labelId
        this.$refs.articleLists.init('search')
      }
    },
    mounted() {
      this.whichPage()
      this.getUserInfoFn()
      this.$Bus.$on('commonConfig', res => {
        this.index_link = res.data.getSideNav.shop_index_url
      })
      this.getTagClassList()

      this.community_user_reply_id = this.$route.query.community_user_reply_id || 0
      if (this.community_user_reply_id > 0) {
        this.getCommunityUserInfo({ community_user_reply_id: this.community_user_reply_id })
      }
      this.community_user_id = this.$route.query.community_user_id || 0
      // console.log(this.community_user_id, '======>333')
      if (this.community_user_id > 0) {
        this.getCommunityUserInfo({ community_user_id: this.community_user_id })
      }
    }
  })
</script>

<style lang="scss">
  @import "../../styles/mixin";
  $searchColor: #ffe8e6;
  .community{
    &-wrapper{
      .wrapper-top{
        width: 100%;
        height: 211px;
        background: url("https://img.wifenxiao.com/h5-wfx/images/community/top_bg.jpg");
        background-size: 100% auto;
        &-item{
          padding: 25px 0 20px 20px;
          font-size: 0;
          margin-bottom: 5px;
          &-avatar{
            @include alignTop;
            width: 90px;
            height: 90px;
            text-align: center;
            font-size: 0;
            border-radius: 50%;
            border: 5px solid rgba(255,255,255, .47);
            overflow: hidden;
            img{
              width: 100%;
            }
          }
          &-input{
            @include alignTop;
            width:calc( 100% - 180px);
            height: 66px;
            line-height: 66px;
            border-radius: 66px;
            background: rgba(255,255,255, .13);
            padding-left: 20px;
            margin-left: 14px;
            margin-right: 11px;
            font-size: 0;
            margin-top: 12px;
            white-space: nowrap;
            .icon-search{
              @include alignTop;
              font-size: 36px;
              margin-top: 2px;
              margin-right: 10px;
              .icon{
                width: 36px;
                height: 36rpx;
                margin-top: 12px;
              }
            }
            input{
              @include defaultInput;
              display: inline-block;
              line-height: 40px;
              height: 40px;
              .place-holder{
                color:#f1f1f1;
              }
            }
          }
          .icon_store{
            width: 50px;
            height: 50px;
            display: inline-block;
          }
          &-icon{
            @include alignTop;
            color: $searchColor;
            text-align: center;
            margin-top: 10px;
            .icon{
              font-size: 50px;
            }
            .text{
              font-size: 20px;
            }
          }
        }
        &-tab{
          text-align: center;
          &-item{
            width: 220px;
            color: #fff;
            @include alignTop;
            .txt{
              font-size: 30px;
              display: inline-block;
              position: relative;
            }
            &.active{
              .txt{
                font-size: 32px;
                &:after{
                  position: absolute;
                  bottom: -18px;
                  left: 0;
                  content: '';
                  display: inline-block;
                  width: 100%;
                  height: 6px;
                  background: #fff;
                  border-radius: 10px;
                }
              }
            }
          }
        }
      }
      .wrapper-content{
        .tag_class{
          width: 100%;
          padding: 16px 20px;
          background-color: #fff;
          ul{
            display: flex;
            align-items: center;
            overflow-x: auto;
            li{
              flex: 1 0 auto;
              font-size: 26px;
              color: #999;
              max-width: 200px;
              padding: 10px 22px;
              margin-right: 20px;
              background-color: #f5f5f5;
              border-radius: 200px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
              &.sel{
                color: #F30C23;
                background-color: rgba(243, 12, 35, .1);
              }
            }
          }
        }
      }
    }
  }
</style>
